<template>
  <div>
    <div class="dept-tree">
      <div class="dept-left">
        <div class="dept-content">
          <div class="dept-button">
            <el-row>
              <el-button type="info" size="mini" style="padding: 12px" plain @click="addModule">权限模块新增</el-button>
              <el-button type="warning" size="mini " style="padding: 12px" plain @click="editAcl">权限编辑</el-button>
              <el-button type="info" size="mini " style="padding: 12px" plain @click="addAcl">权限点新增</el-button>
            </el-row>
          </div>
          <div class="block">
            <el-tree
              ref="tree"
              :data="menuTree"
              node-key="id"
              :default-expand-all="false"
              :highlight-current="true"
              :default-expanded-keys="defaultExpandedKeys"
              :expand-on-click-node="true"
              @node-click="getCurrentKey()"
            >
              <span slot-scope="{ node, data}" class="custom-tree-node">
                <div>
                  <span>{{ node.label }}</span>
                  <i v-show="'{{node.sysAclStatus}}' === '0' || '{{node.sysAcModulelStatus}}' === '0'" class="el-icon-circle-check" />
                </div>
              </span>
            </el-tree>
          </div>
        </div>
      </div>
      <div class="dept-right">
        <div v-show="aclShow()" class="dept-detail dept-common">
          <div style="text-align: center;margin-top: -20px">
            <el-button type="warning" style="margin: 0 auto 10px;padding: 10px 30px" plain>{{ showButtonName }}</el-button>
          </div>
          <el-form ref="ruleFormAcl" :model="ruleFormAcl" status-icon :rules="rulesAcl" label-width="100px" class="demo-ruleForm">
            <div class="imput-buttom">
              <el-form-item label="菜单名称:" class="name" prop="sysAclName">
                <el-input v-model="ruleFormAcl.sysAclName" class="input" :disabled="isDisabled()" placeholder="请输入内容" autocomplete="off" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="父菜单名称:" class="name">
                <el-select v-model="ruleFormAcl.fatherAclName" class="input" :disabled="parentIdIsDisabled()" placeholder="请输入内容" @change="selectAclChange">
                  <el-option
                    v-for="item of fatherDeptList"
                    v-if="fatherDeptList && fatherDeptList.length >0"
                    :key="item.sysAclModuleUuid"
                    :label="item.sysAclModuleName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="父菜单id:" class="name" prop="sysAclModuleId">
                <el-input v-model="ruleFormAcl.sysAclModuleId" class="input" :disabled="true" placeholder="请输入内容" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="系统类型:" class="name" prop="sysAclPermissionType">
                <el-input-number v-model="ruleFormAcl.sysAclPermissionType" :disabled="sysAclPermissionTypeShow()" :min="0" :max="100" label="描述文字" @change="handleChange" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="菜单URL:" class="name" prop="sysAclUrl">
                <el-input v-model="ruleFormAcl.sysAclUrl" class="input" :disabled="isDisabled()" placeholder="请输入内容" autocomplete="off" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="菜单类型:" prop="sysAclType">
                <el-select v-model="ruleFormAcl.sysAclType" :disabled="isDisabled()" placeholder="请选择菜单类型">
                  <el-option label="菜单" value="1" />
                  <el-option label="按钮" value="2" />
                  <el-option label="其他" value="3" />
                </el-select>
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="按钮动作:" class="name" prop="sysAclAction">
                <el-input v-model="ruleFormAcl.sysAclAction" class="input" :disabled="isDisabled()" placeholder="请输入内容" autocomplete="off" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="所属页面:" class="name" prop="sysAclRouter">
                <el-input v-model="ruleFormAcl.sysAclRouter" class="input" :disabled="isDisabled()" placeholder="请输入内容" autocomplete="off" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="菜单排序:" class="name" prop="sysAclSeq">
                <el-input-number v-model="ruleFormAcl.sysAclSeq" :disabled="isDisabled()" :min="1" :max="100000000" label="描述文字" @change="handleChange" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="菜单状态" prop="sysAclStatus">
                <el-radio v-model="ruleFormAcl.sysAclStatus" class="input radio" :disabled="isDisabled()" label="0" border size="medium">启用</el-radio>
                <el-radio v-model="ruleFormAcl.sysAclStatus" class="input radio" :disabled="isDisabled()" label="1" border size="medium">禁用</el-radio>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleFormAcl')">确认</el-button>
              <el-button @click="resetForm('ruleFormAcl')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="!aclShow()" class="dept-detail dept-common">
          <div style="text-align: center;margin-top: -20px">
            <el-button type="warning" style="margin: 0 auto 10px;padding: 10px 30px" plain>{{ showButtonName }}</el-button>
          </div>
          <el-form ref="ruleFormModule" :model="ruleFormModule" status-icon :rules="ruleModule" label-width="100px" class="demo-ruleForm">
            <div class="imput-buttom">
              <el-form-item label="模块名称:" class="name" prop="sysAclModuleName">
                <el-input v-model="ruleFormModule.sysAclModuleName" class="input" :disabled="isDisabled()" placeholder="请输入内容" autocomplete="off" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item v-model="ruleFormModule.fatherAclModuleName" label="父模块名称:" class="name">
                <el-select v-model="ruleFormModule.fatherAclModuleName" class="input" :disabled="parentIdIsDisabled()" placeholder="请输入内容" @change="selectAclChange">
                  <el-option
                    v-for="item of fatherDeptList"
                    v-if="fatherDeptList && fatherDeptList.length >0"
                    :key="item.sysAclModuleUuid"
                    :label="item.sysAclModuleName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="父模块id:" class="name" prop="sysAclModuleParentId">
                <el-input v-model="ruleFormModule.sysAclModuleParentId" class="input" :disabled="true" placeholder="请输入内容" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="系统类型:" class="name" prop="sysAclPermissionType">
                <el-input-number v-model="ruleFormModule.sysAclPermissionType" :disabled="sysAclPermissionTypeShow()" :min="0" :max="100" label="描述文字" @change="handleChange" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="模块排序:" class="name" prop="sysAclModuleSeq">
                <el-input-number v-model="ruleFormModule.sysAclModuleSeq" :disabled="isDisabled()" :min="1" :max="100000000" label="描述文字" @change="handleChange" />
              </el-form-item>
            </div>
            <div class="imput-buttom">
              <el-form-item label="模块状态" prop="sysAcModulelStatus">
                <el-radio v-model="ruleFormModule.sysAcModulelStatus" class="input radio" :disabled="isDisabled()" label="0" border size="medium">启用</el-radio>
                <el-radio v-model="ruleFormModule.sysAcModulelStatus" class="input radio" :disabled="isDisabled()" label="1" border size="medium">禁用</el-radio>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleFormModule')">确认</el-button>
              <el-button @click="resetForm('ruleFormModule')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Permission from '@/api/axios/api/author/permission'
import Tip from '@/utils/tip'
export default {
  name: 'AuthMenu',
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('排序大小不能为空'))
      }
      if (!Number.isInteger(Number(value))) {
        callback(new Error('请输入数字'))
      }
      callback()
    }
    var checkModuleSwq = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('排序大小不能为空'))
      }
      if (!Number.isInteger(Number(value))) {
        callback(new Error('请输入数字'))
      }
      callback()
    }
    return {
      ruleFormAcl: {
        id: null,
        sysAclName: '',
        sysAclUuid: '',
        fatherAclName: '',
        sysAclUrl: '',
        sysAclType: '',
        sysAclSeq: null,
        sysAclPermissionType: null,
        sysAclModuleId: null,
        sysAclAction: '',
        sysAclRouter: '',
        sysAclStatus: '1'
      },
      rulesAcl: {
        sysAclName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        sysAclPermissionType: [
          { required: true, message: '请输入系统类型', trigger: 'blur' }
        ],
        sysAclUrl: [
          { required: true, message: '请输入菜单URL', trigger: 'blur' }
        ],
        sysAclType: [
          { required: true, message: '请输入菜单类型', trigger: 'blur' }
        ],
        sysAclAction: [
          { required: true, message: '请输入按钮动作', trigger: 'blur' }
        ],
        sysAclStatus: [
          { required: true, message: '请选择菜单状态', trigger: 'blur' }
        ],
        sysAclRouter: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ],
        sysAclModuleId: [
          { required: true, message: '请输入父模块id', trigger: 'blur' }
        ],
        sysAclSeq: [
          { required: true, validator: checkAge, trigger: 'blur' }
        ]
      },
      ruleFormModule: {
        sysAclModuleName: '',
        sysAclModuleUuid: '',
        fatherAclModuleName: '',
        sysAcModulelStatus: '1',
        sysAclModuleParentId: null,
        sysAclPermissionType: null,
        sysAclModuleSeq: null,
        id: null
      },
      ruleModule: {
        sysAclModuleName: [
          { required: true, message: '请输入模块名称', trigger: 'blur' }
        ],
        sysAclPermissionType: [
          { required: true, message: '请输入菜单系统类型', trigger: 'blur' }
        ],
        sysAcModulelStatus: [
          { required: true, message: '请选择模块状态', trigger: 'blur' }
        ],
        sysAclModuleParentId: [
          { required: true, message: '请输入父模块id', trigger: 'blur' }
        ],
        sysAclModuleSeq: [
          { required: true, validator: checkModuleSwq, trigger: 'blur' }
        ]
      },
      // 父部门名称的下拉框集合
      fatherDeptList: [],
      // 权限树
      menuTree: [],
      defaultExpandedKeys: [],
      aclSubmitType: '',
      ruleForm: {},
      // 暂时用不到
      aclShowBoolean: false,
      // 所有权限 k 前缀+id, v 对象
      allAclMap: new Map(),
      // 表单是否禁用
      isDisabledBoolean: true,
      // 父部门名称 是否禁用
      parentIdIsDisabledBoolean: true,
      sysAclPermissionTypeShowBoolean: true,
      // 按钮展示文字
      showButtonName: '请选择权限展示内容'
    }
  },
  created() {
    this.menuTreeManager()
  },
  methods: {
    selectAclChange(value) {
      this.ruleFormModule.sysAclModuleParentId = value
      this.ruleFormAcl.sysAclModuleId = value
    },
    aclShow() {
      return this.aclShowBoolean
    },
    sysAclPermissionTypeShow() {
      return this.sysAclPermissionTypeShowBoolean
    },
    isDisabled() {
      return this.isDisabledBoolean
    },
    parentIdIsDisabled() {
      return this.parentIdIsDisabledBoolean
    },
    handleChange(value) {
      this.ruleFormModule.sysAclPermissionType = value
    },
    fatherAclNameSelect() {
      const currentAcl = this.$refs.tree.data
      const currentDeptJson = JSON.parse(JSON.stringify(this.original))
      this.fatherDeptList = []
      this.recursiveRenderDeptSelect(currentDeptJson, 1, currentAcl.id, currentAcl.sysAclModuleLevel)
    },
    recursiveRenderDeptSelect(deptList, level, id, deptLevel) {
      level = level | 0
      if (deptList && deptList.length > 0) {
        deptList.forEach(dept => {
          var blank = ''
          if (level > 1) {
            for (var j = 3; j <= level; j++) {
              blank += '...'
            }
            blank += '∟'
          }
          if (id !== dept.id && dept.sysAclModuleLevel.indexOf(deptLevel) === -1) {
            dept.sysAclModuleName = blank + dept.sysAclModuleName
            this.fatherDeptList.push(dept)
          }
          if (dept.aclModuleList && dept.aclModuleList.length > 0) {
            this.recursiveRenderDeptSelect(dept.aclModuleList, level + 1, id, deptLevel)
          }
        })
      }
    },
    addModule() {
      const currentAcl = this.$refs.tree.getCurrentNode()
      this.showButtonName = '正在 新增 权限模块。。。'
      this.aclSubmitType = '11'
      if (currentAcl === null) {
        this.ruleFormModule.sysAclModuleParentId = 0
        this.isDisabledBoolean = false
        this.parentIdIsDisabledBoolean = false
        this.aclShowBoolean = false
        this.sysAclPermissionTypeShowBoolean = false
        return
      }
      if (currentAcl.id.indexOf('aclPrefix') === -1) {
        this.resetForm('ruleFormModule')
        this.fatherAclNameSelect()
        this.isDisabledBoolean = false
        this.parentIdIsDisabledBoolean = false
        this.aclShowBoolean = false
        this.sysAclPermissionTypeShowBoolean = true
        this.ruleFormModule.sysAclModuleParentId = currentAcl.id.substring('modulePrefix'.length)
        this.ruleFormModule.fatherAclModuleName = currentAcl.label
      }
    },
    addAcl() {
      const currentAcl = this.$refs.tree.getCurrentNode()
      if (currentAcl === null) {
        Tip.warnin('请选择权限模块')
        return
      }
      if (currentAcl.id.indexOf('aclPrefix') === -1) {
        this.aclSubmitType = '22'
        this.resetForm('ruleFormAcl')
        this.fatherAclNameSelect()
        this.isDisabledBoolean = false
        this.parentIdIsDisabledBoolean = false
        this.aclShowBoolean = true
        this.sysAclPermissionTypeShowBoolean = true
        this.ruleFormAcl.sysAclModuleId = currentAcl.id.substring('modulePrefix'.length)
        this.ruleFormAcl.fatherAclName = currentAcl.label
        this.showButtonName = '正在 新增 权限点。。。'
      } else {
        Tip.warnin('请选择权限模块')
      }
    },
    editAcl() {
      // this.resetForm('ruleFormAcl')
      // this.resetForm('ruleFormModule')
      // 编辑权限
      const currentAcl = this.$refs.tree.getCurrentNode()
      if (currentAcl === null) {
        Tip.warnin('请选择权限')
      } else {
        if (currentAcl.id.indexOf('aclPrefix') === -1) {
          const uuid = {
            sysAclModuleUuid: currentAcl.sysAclModuleUuid
          }
          this.aclSubmitType = '1'
          this.showButtonName = '正在 编辑 权限模块。。。'
          // 权限模块
          Permission.aclModuleDetail(uuid).then(res => {
            this.isDisabledBoolean = false
            this.parentIdIsDisabledBoolean = false
            this.sysAclPermissionTypeShowBoolean = true
            this.aclShowBoolean = false
            res = res.data
            this.ruleFormModule.sysAclModuleUuid = res.sysAclModuleUuid
            this.ruleFormModule.sysAclModuleName = res.sysAclModuleName
            this.ruleFormModule.sysAcModulelStatus = res.sysAcModulelStatus
            this.ruleFormModule.sysAclModuleParentId = res.sysAclModuleParentId
            this.ruleFormModule.sysAclModuleSeq = res.sysAclModuleSeq
            this.ruleFormModule.sysAclPermissionType = res.sysAclPermissionType
            const aclObj = this.allAclMap.get('modulePrefix' + res.sysAclModuleParentId)
            this.ruleFormAcl.fatherAclName = aclObj === undefined ? '' : aclObj.label
          })
        } else {
          const uuid = {
            sysAclUuid: currentAcl.sysAclUuid
          }
          // 权限点
          this.aclSubmitType = '2'
          this.showButtonName = '正在 编辑 权限菜单。。。'
          Permission.aclDetail(uuid).then(res => {
            this.isDisabledBoolean = false
            this.parentIdIsDisabledBoolean = false
            this.sysAclPermissionTypeShowBoolean = true
            res = res.data
            this.ruleFormAcl.sysAclUuid = res.sysAclUuid
            this.ruleFormAcl.sysAclModuleId = res.sysAclModuleId
            this.ruleFormAcl.sysAclAction = res.sysAclAction
            this.ruleFormAcl.sysAclUrl = res.sysAclUrl
            this.ruleFormAcl.sysAclName = res.sysAclName
            this.ruleFormAcl.sysAclType = res.sysAclType
            this.ruleFormAcl.sysAclPermissionType = res.sysAclPermissionType
            this.ruleFormAcl.sysAclSeq = res.sysAclSeq
            this.ruleFormAcl.sysAclRouter = res.sysAclRouter
            this.ruleFormAcl.sysAclStatus = res.sysAclStatus
            const aclObj = this.allAclMap.get('modulePrefix' + res.sysAclModuleId)
            this.ruleFormAcl.fatherAclName = aclObj === undefined ? '' : aclObj.label
          })
        }
      }
    },
    disabledAll() {
      this.isDisabledBoolean = true
      this.parentIdIsDisabledBoolean = true
      this.sysAclPermissionTypeShowBoolean = true
    },
    aclDetail() {
      Permission.aclDetail()
    },
    submitForm(formName) {
      if (this.aclSubmitType === '') {
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 权限模块编辑
          if (this.aclSubmitType === '1') {
            Permission.aclModuleEdit(this.ruleFormModule).then(res => {
              if (res.status === 200) {
                Tip.success(res.data)
                this.disabledAll()
                this.menuTreeManager()
              } else {
                Tip.error(res.data)
              }
            })
          } else if (this.aclSubmitType === '2') { // 权限点编辑
            Permission.aclEdit(this.ruleFormAcl).then(res => {
              if (res.status === 200) {
                Tip.success(res.data)
                this.disabledAll()
                this.menuTreeManager()
              } else {
                Tip.error(res.data)
              }
            })
          } else if (this.aclSubmitType === '22') { // 权限点新增
            console.log(this.ruleFormAcl)
            Permission.aclAdd(this.ruleFormAcl).then(res => {
              if (res.status === 200) {
                Tip.success(res.data)
                this.disabledAll()
                this.menuTreeManager()
              } else {
                Tip.error(res.data)
              }
            })
          } else if (this.aclSubmitType === '11') { // 权限模块新增
            Permission.aclModuleAdd(this.ruleFormModule).then(res => {
              if (res.status === 200) {
                Tip.success(res.data)
                this.disabledAll()
                this.menuTreeManager()
              } else {
                Tip.error(res.data)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getCurrentKey() {
      this.resetForm('ruleFormAcl')
      this.resetForm('ruleFormModule')
      this.aclSubmitType = ''
      this.isDisabledBoolean = true
      this.parentIdIsDisabledBoolean = true
      this.sysAclPermissionTypeShowBoolean = true
      const currentAcl = this.$refs.tree.getCurrentNode()
      if (currentAcl.id.indexOf('aclPrefix') === -1) {
        this.aclShowBoolean = false
        this.showButtonName = '正在 查看 权限模块。。。'
        this.clickShowAclModule(currentAcl)
      } else {
        this.aclShowBoolean = true
        this.showButtonName = '正在 查看 权限菜单。。。'
        this.clickShowAcl(currentAcl)
      }
    },
    clickShowAcl(currentAcl) {
      this.ruleFormAcl.sysAclUuid = currentAcl.sysAclUuid
      this.ruleFormAcl.sysAclModuleId = currentAcl.sysAclModuleId
      this.ruleFormAcl.sysAclAction = currentAcl.sysAclAction
      this.ruleFormAcl.sysAclUrl = currentAcl.sysAclUrl
      this.ruleFormAcl.sysAclName = currentAcl.label
      this.ruleFormAcl.sysAclType = currentAcl.sysAclType
      this.ruleFormAcl.sysAclSeq = currentAcl.sysAclSeq
      this.ruleFormAcl.sysAclPermissionType = currentAcl.sysAclPermissionType
      this.ruleFormAcl.sysAclRouter = currentAcl.sysAclRouter
      this.ruleFormAcl.sysAclStatus = currentAcl.sysAclStatus
      const aclObj = this.allAclMap.get('modulePrefix' + currentAcl.sysAclModuleId)
      this.ruleFormAcl.fatherAclName = aclObj === undefined ? '' : aclObj.label
    },
    clickShowAclModule(currentAcl) {
      this.ruleFormModule.sysAclModuleName = currentAcl.label
      this.ruleFormModule.sysAcModulelStatus = currentAcl.sysAcModulelStatus
      this.ruleFormModule.sysAclSeq = currentAcl.sysAclSeq
      this.ruleFormModule.sysAclPermissionType = currentAcl.sysAclPermissionType
      this.ruleFormModule.sysAclModuleUuid = currentAcl.sysAclModuleUuid
      this.ruleFormModule.sysAclModuleParentId = currentAcl.sysAclModuleParentId
      const aclModuleObj = this.allAclMap.get('modulePrefix' + currentAcl.sysAclModuleParentId)
      this.ruleFormModule.fatherAclModuleName = aclModuleObj === undefined ? '' : aclModuleObj.label
    },
    recursivePrepareTreeData(param) {
      // 建立个树形结构,需要定义个最顶层的父节点renderContent
      const parent = []
      // this.$refs.tree
      if (param && param.length > 0) {
        param.forEach(param => {
          const fathChild = this.moduleList(param.aclModuleList)
          if (param.aclList && param.aclList.length > 0) {
            param.aclList.forEach(param => {
              const obj = {
                label: param.sysAclName,
                sysAclModuleId: param.sysAclModuleId,
                sysAclAction: param.sysAclAction,
                sysAclRouter: param.sysAclRouter,
                sysAclUrl: param.sysAclUrl,
                sysAclType: param.sysAclType,
                sysAclPermissionType: param.sysAclPermissionType,
                sysAclSeq: param.sysAclSeq,
                sysAclUuid: param.sysAclUuid,
                sysAclStatus: param.sysAclStatus,
                id: 'aclPrefix' + param.id
              }
              this.allAclMap.set('aclPrefix' + param.id, obj)
              fathChild.push(obj)
            })
          }
          const obj = {
            label: param.sysAclModuleName,
            sysAcModulelStatus: param.sysAcModulelStatus,
            sysAclModuleUuid: param.sysAclModuleUuid,
            sysAclModuleParentId: param.sysAclModuleParentId,
            sysAclModuleSeq: param.sysAclModuleSeq,
            sysAclPermissionType: param.sysAclPermissionType,
            sysAclModuleLevel: param.sysAclModuleLevel,
            id: 'modulePrefix' + param.id,
            children: fathChild
          }
          if (param.aclModuleList && param.aclModuleList.length > 0) {
            this.defaultExpandedKeys.push('modulePrefix' + param.id)
          }
          this.allAclMap.set('modulePrefix' + param.id, obj)
          parent.push(obj)
        })
      }
      this.menuTree = parent
    },
    moduleList(moduleList, aclList) {
      const child = []
      if (aclList && aclList.length > 0) {
        aclList.forEach(acl => {
          const obj = {
            label: acl.sysAclName,
            sysAclModuleId: acl.sysAclModuleId,
            sysAclAction: acl.sysAclAction,
            sysAclRouter: acl.sysAclRouter,
            sysAclUrl: acl.sysAclUrl,
            sysAclType: acl.sysAclType,
            sysAclPermissionType: acl.sysAclPermissionType,
            sysAclSeq: acl.sysAclSeq,
            sysAclUuid: acl.sysAclUuid,
            sysAclStatus: acl.sysAclStatus,
            id: 'aclPrefix' + acl.id
          }
          this.allAclMap.set('aclPrefix' + acl.id, obj)
          child.push(obj)
        })
      }
      if (moduleList && moduleList.length > 0) {
        moduleList.forEach(param => {
          const obj = {
            label: param.sysAclModuleName,
            sysAcModulelStatus: param.sysAcModulelStatus,
            sysAclModuleUuid: param.sysAclModuleUuid,
            sysAclModuleParentId: param.sysAclModuleParentId,
            sysAclModuleSeq: param.sysAclModuleSeq,
            sysAclPermissionType: param.sysAclPermissionType,
            sysAclModuleLevel: param.sysAclModuleLevel,
            id: 'modulePrefix' + param.id,
            children: this.moduleList(param.aclModuleList, param.aclList)
          }
          if (param.aclModuleList && param.aclModuleList.length > 0) {
            this.defaultExpandedKeys.push('modulePrefix' + param.id)
          }
          this.allAclMap.set('modulePrefix' + param.id, obj)
          child.push(obj)
        })
      }
      return child
    },
    menuTreeManager() {
      Permission.menuTree().then(res => {
        res = res.data
        this.original = res
        this.recursivePrepareTreeData(res)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .dept-tree
    margin-left 250px
    padding-top 10px
    overflow hidden
    display flex
    overflow hidden
    .dept-left
      width 30%
      overflow hidden
      .dept-content
        width 300px
        overflow hidden
        .dept-button
          margin-top 10px
          margin-bottom 10px
    .dept-right
      width 70%
      overflow hidden
      .dept-common
        margin 30px 10%
        .imput-buttom
          margin-bottom 10px
          .input
            width 70%
          .radio
            width 31%
          .namea
            background-color red
            text-align center
            width 100px
            white-space: nowrap;
            display inline-block
            border-top-right-radius: 0
            border: 1px solid #DCDFE6
            border-bottom-right-radius: 0
            background-color: #f5f7fa;
            color: #909399;
            border-radius: 4px;
            vertical-align: middle;
        .imput-area
          margin-bottom 20px
</style>
